<script>
import { findIndex } from 'lodash'
import {
  computed,
  defineComponent,
  onUnmounted,
  reactive,
  toRaw,
  watch,
} from 'vue'
import * as Antd from 'ant-design-vue'

export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    checked_list: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  emits: ['result'],
  setup(props, context) {
    let list = computed(() => {
      return props.list
    })

    let indeterminate = computed(() => {
      if (
        checked_list.data.length == 0 ||
        checked_list.data.length == list.value.length
      ) {
        return false
      }
      return true
    })

    let checkAll = computed(() => {
      return checked_list.data.length == list.value.length
    })

    let checked_list = reactive({
      data: [...props.checked_list],
    })
    //实时更新checked_list
    let _watch = watch(
      () => props.checked_list,
      () => {
        checked_list.data = props.checked_list
      }
    )

    let changeHandler = (e) => {
      if (e.target.checked) {
        //添加
        let _index = checked_list.data.indexOf(e.target.value)
        _index < 0 && checked_list.data.push(e.target.value)
      } else {
        //删除
        let _index = checked_list.data.indexOf(e.target.value)
        _index >= 0 && checked_list.data.splice(_index, 1)
      }
    }
    let checkAllHandler = (e) => {
      if (e.target.checked) {
        checked_list.data = [...list.value.map((x) => x.value)]
      } else {
        checked_list.data = []
      }
      updateEvent()
    }

    // let _watch = watch(
    //   () => checked_list,
    //   () => {
    //     context.emit('result', {
    //       params: {
    //         list: [...checked_list.data],
    //       },
    //     })
    //   },
    //   {
    //     deep: true,
    //   }
    // )
    //更新外部事件
    let updateEvent = () => {
      let o = checked_list.data.map((x) => {
        let _i = findIndex(list.value, { id: x })
        return { ...toRaw(list.value[_i]) }
      })
      context.emit('result', {
        params: {
          list: [...checked_list.data],
          origin: o, //原始对象
        },
      })
    }
    onUnmounted(() => {
      _watch()
    })
    return {
      list,
      indeterminate,
      changeHandler,
      checked_list,
      checkAll,
      checkAllHandler,
      updateEvent,
    }
  },
  render() {
    return (
      <div>
        <Antd.Checkbox
          indeterminate={this.indeterminate}
          checked={this.checkAll}
          onChange={this.checkAllHandler}
        >
          全部
        </Antd.Checkbox>
        <Antd.CheckboxGroup
          value={this.checked_list.data}
          onChange={(e) => {
            this.updateEvent()
            //console.log(this.checked_list.data)
          }}
        >
          {this.list.map((x) => {
            return (
              <Antd.Checkbox value={x.value} onChange={this.changeHandler}>
                <span style={{ color: x.color }} title={x.label}>
                  {x.label}
                </span>
              </Antd.Checkbox>
            )
          })}
        </Antd.CheckboxGroup>
      </div>
    )
  },
})
</script>
